<template>
  <div>
    <div class="recommend-title">周末去哪</div>
    <ul>
      <li class="item border-bottom" v-for="(item,index) of weekendList" :key="item.id"  :class="{'mt20':index>0?true:false}">
        <div class="item-img-wraper">
          <img :src="item.imgUrl" alt="" class="item-img">
        </div>
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name:'homeWeekend',
  props:{
    weekendList:Array
  },
  data(){
    return{
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.recommend-title{
  margin-top .2rem;
  line-height .8rem;
  text-indent .2rem;  // 文本缩进
  background #eee;
}
.mt20{
  margin-top .2rem;
}
.item{
  .item-img-wraper{
    height 0;
    overflow hidden;
    padding-bottom 33.9%;
  }
  .item-img{
    // 因为父极元素已经为0了。 写height 100%也没啥用。 所以直接用width:100%。填满这个div
  width 100%;
  }
  .item-info{
    padding .1rem;
    min-width 0;
    .item-title{
      line-height .54rem;
      font-size .32rem;
      ellipsis();
    }
    .item-desc{
      line-height .4rem;
      color:#ccc;
      ellipsis();
    }
  }
}
</style>

